Component({
  properties: {
    show: { type: Boolean, value: false }
  },
  data: {
    init: true,
    height: 0,
    shadeAnimation: {},
    contentAnimation: {}
  },
  observers: {
    show (value) {
      if (value) {
        // 设置drawer高度
        const query = wx.createSelectorQuery().in(this)
        query.select('.drawer-content').boundingClientRect((res) => {
          this.setData({ height: res.height * (750 / res.width) + 'rpx' })
          this.showDrawer()
          this.setData({ init: false })
        }).exec()
      } else {
        if (!this.data.init) { this.closeDrawer() }
      }
    }
  },
  lifetimes: {
    attached () {
      // 创建动画
      this.shadeAnimation = wx.createAnimation({ timingFunction: 'ease' })
      this.contentAnimation = wx.createAnimation({ timingFunction: 'ease' })
    }
  },
  methods: {
    showDrawer () {
      // contentAnimation
      this.contentAnimation.opacity(1).step({ duration: 1 })
      this.contentAnimation.top('calc(100% - ' + this.data.height + ')').step({ duration: 300 })
      this.setData({ contentAnimation: this.contentAnimation.export() })
      // shadeAnimation
      this.shadeAnimation.top(0).step({ duration: 1 })
      this.shadeAnimation.opacity(.5).step({ duration: 300 })
      this.setData({ shadeAnimation: this.shadeAnimation.export() })
    },
    closeDrawer () {
      // contentAnimation
      this.contentAnimation.top('100%').step({ duration: 300 })
      this.contentAnimation.opacity(0).step({ duration: 1 })
      this.setData({ contentAnimation: this.contentAnimation.export() })
      // shadeAnimation
      this.shadeAnimation.opacity(0).step({ duration: 300 })
      this.shadeAnimation.top('100%').step({ duration: 1 })
      this.setData({ shadeAnimation: this.shadeAnimation.export() })
    },
    handleClose () {
      this.setData({ show: false })
    }
  }
})
